<div class="alert alert-error" ng-if="planning.getRestError().rest_error_occured" translate>A server error has occured. <b>You should refresh this page</b>.</div>
<div class="alert alert-error" ng-if="planning.getRestError().rest_error_occured" ng-bind-html="planning.getRestError().rest_error"></div>

<div class="tuleap-modal-loading" ng-if="planning.loading_modal.loading"></div>

<div id="planning-view" ng-class="{ 'multi-selected-backlog-items': planning.getNumberOfSelectedBacklogItem() > 0 }">
    <div backlog id="backlog"></div>

    <div id="divider"></div>

    <div id="planned">
        <div class="milestones">
            <div class="planning-header">
                <h2 translate>Milestones</h2>

                <button ng-if="planning.backlog.submilestone_type  && planning.backlog.user_can_move_cards"
                    class="btn btn-small"
                    ng-click="planning.showAddSubmilestoneModal($event, planning.backlog.submilestone_type)"
                >
                    <i class="icon-plus"></i> <span translate>Add a {{ planning.backlog.submilestone_type.label }}</span>
                </button>

                <div ng-if="planning.milestones.content.length > 0" class="btn-group view-switcher" data-toggle="buttons-radio">
                    <button
                        type="button"
                        class="btn btn-small"
                        ng-class="{active: planning.current_closed_view_class === planning.show_closed_view_key}"
                        ng-click="planning.switchClosedMilestoneItemsViewMode(planning.show_closed_view_key)"
                        title="{{ 'Show closed backlog items' | translate }}"
                    >
                        <i class="icon-eye-open"></i> <span translate>Show closed backlog items</span>
                    </button>
                    <button
                        type="button"
                        class="btn btn-small"
                        ng-class="{active: planning.current_closed_view_class === planning.hide_closed_view_key}"
                        ng-click="planning.switchClosedMilestoneItemsViewMode(planning.hide_closed_view_key)"
                        title="{{ 'Hide closed backlog items' | translate }}"
                    >
                        <i class="icon-eye-close"></i> <span translate>Hide closed backlog items</span>
                    </button>
                </div>

                <div class="clearfix"></div>
            </div>

            <div translate class="alert alert-warning" ng-if="planning.displayUserCantPrioritizeForMilestones()">
                You are not allowed to rank on this planning
            </div>

            <div class="no-open-milestones" ng-if="! planning.thereAreOpenMilestonesLoaded() && planning.milestones.open_milestones_fully_loaded" translate>
                There are no open milestones
            </div>
            <fieldset
                ng-repeat="milestone in planning.getOpenMilestones() track by milestone.id"
                class="milestone"
                ng-class="{ collapsed: milestone.collapsed, updating: milestone.updating }"
            >
                <milestone></milestone>
            </fieldset>


            <div ng-if="planning.thereAreClosedMilestonesLoaded() || (! planning.thereAreClosedMilestonesLoaded() && planning.milestones.closed_milestones_fully_loaded)" class="milestones-separator">
                <span translate>Closed milestones are below</span>
            </div>
            <button id="load-closed-milestone"
                ng-if="! planning.thereAreClosedMilestonesLoaded() && ! planning.milestones.loading && ! planning.milestones.closed_milestones_fully_loaded"
                class="btn btn-link btn-small"
                ng-click="planning.displayClosedMilestones()"
                translate
            >
                Load closed milestones
            </button>
            <div class="no-closed-milestones" ng-if="! planning.thereAreClosedMilestonesLoaded() && planning.milestones.closed_milestones_fully_loaded" translate>
                There are no closed milestones
            </div>
            <fieldset
                ng-if="planning.thereAreClosedMilestonesLoaded()"
                ng-repeat="milestone in planning.getClosedMilestones() track by milestone.id"
                class="milestone"
                ng-class="{ collapsed: milestone.collapsed, updating: milestone.updating }"
            >
                <milestone></milestone>
            </fieldset>

            <div class="loading" ng-if="planning.milestones.loading"></div>
        </div>
    </div>

    <div class="clearfix"></div>
</div>

<div backlog-item-selected-bar></div>
